<template>
  <view class="my-reserve-page">
    <view v-if="reservations.length === 0" class="no-reserve">
      暂无预约
    </view>

    <scroll-view scroll-y style="height: calc(100vh - 100rpx);">
      <view v-for="reserve in reservations" :key="reserve.id" class="reserve-item">
        <!-- 图片在左，文字在右 -->
        <view class="reserve-row photo-row">
          <image :src="reserve.photo" class="seat-photo" mode="widthFix"></image>
          <view class="seat-info">
            <text>预约位置：{{ reserve.x }}排{{ reserve.y }}列(id：{{ reserve.gridId }})</text>
            <text>预约座位类别：{{ reserve.name }}</text>
            <text>预约日期：{{ reserve.time }}</text>
          </view>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      user: uni.getStorageSync('xm-user') || {},
      reservations: []
    };
  },
  created() {
    this.loadReservations();
  },
  methods: {
    loadReservations() {
      if (!this.user.id) {
        uni.showToast({ title: '未登录', icon: 'none' });
        return;
      }
      this.$request.get('/gridReservation/selectAll', {
        userId: this.user.id,
      }).then(res => {
        if (res.code === '200') {
          this.reservations = (res.data || []).sort((a, b) => {
            const order = { '待使用': 1, '已使用': 2, '已完成': 3 };
            return (order[a.status] || 4) - (order[b.status] || 4);
          });
        } else {
          uni.showToast({ title: res.msg || '查询失败', icon: 'none' });
        }
      }).catch(err => {
        console.error('查询失败:', err);
        uni.showToast({ title: '网络异常', icon: 'none' });
      });
    }
  }
};
</script>

<style scoped>
.my-reserve-page {
  background-color: #f5f5f5;
  min-height: 100vh;
  padding: 20rpx;
}

.no-reserve {
  text-align: center;
  color: #999;
  font-size: 28rpx;
  margin-top: 50rpx;
}

.reserve-item {
  background-color: #fff;
  padding: 20rpx;
  margin-bottom: 20rpx;
  border-radius: 15rpx;
  box-shadow: 0 2rpx 10rpx rgba(0,0,0,0.05);
}

/* 图片+文字行 */
.photo-row {
  display: flex;
  align-items: center;
  gap: 20rpx;
}

.seat-photo {
  width: 120rpx;
  height: 120rpx;
  border-radius: 10rpx;
  object-fit: cover;
}

.seat-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10rpx;
}

.seat-info text {
  font-size: 28rpx;
  color: #333;
}

.status-pending {
  color: #ff4d4f;
  font-weight: bold;
}
</style>
